import React from 'react';
import {
    Row, Col, Breadcrumb,
    Radio, Button, Icon,
    message
} from 'antd';
import Base from '../../base';

const TABS = [
    {path: 'field', text: '字段'},
    {path: 'record', text: '数据'}
];

export class Table extends Base {
    state = {
        tab: 'field'
    };

    render() {
        const {conn, db, table} = this.context.params;
        const tabPath = this.context.routes[3].path;
        const path = `/dbms/${conn}/${db}/${table}`;
        return (
            // 设key强制刷新
            <div key={path}>
                <Row type="flex" align="middle" className="margin-bottom">
                    <Col span="4">
                        <Radio.Group onChange={this.onTabClick.bind(this, path)} defaultValue={tabPath}>
                            {TABS.map((tab, index) => (
                                <Radio.Button key={index} value={tab.path}>
                                    {tab.text}
                                </Radio.Button>
                            ))}
                        </Radio.Group>
                    </Col>
                    <Col span="16" className="center">
                        <Breadcrumb>
                            <Breadcrumb.Item>{conn}</Breadcrumb.Item>
                            <Breadcrumb.Item>{db}</Breadcrumb.Item>
                            <Breadcrumb.Item>{table}</Breadcrumb.Item>
                        </Breadcrumb>
                    </Col>
                    <Col span="4" className="right">
                        <Button type="primary" onClick={this.onReload.bind(this)} disabled>
                            <Icon type="reload"/> 刷新
                        </Button>
                    </Col>
                </Row>
                {this.props.children}
            </div>
        );
    }

    onTabClick(root, e) {
        const path = e.target.value;
        if (path === 'record') {
            message.warn('暂未实现');
            return false;
        }
        if (path !== global.app.dbms.table.view) {
            global.app.dbms.table.view = path;
            this.context.router.push(`${root}/${path}`);
        }
    }

    onReload() {
        const {dbms} = this.context.actions;
        const {conn, db, table} = this.context.params;
        const {tablePath} = this.context.state.dbms.global;
        switch (tablePath) {
        case 'field':
            dbms.field.get(conn, db, table);
            break;
        case 'record':
            dbms.record.get(conn, db, table);
            break;
        }
    }
}

import Field from './field';
import Record from './record';
